<!--  -->
<template>
<div class='tiktok-page'  :class="className">
  <div v-html="css"></div>
  <div class="list-page">
    <div v-if="tiktokList.length > 0" class="list">
      <div class="list-item" v-for="(item,index) in tiktokList" :key="index" @click="link_goods(item)">
        <div class="img">
          <van-image width="100%" height="100%" :src="item.cover" />
        </div>
        <div class="title">
          <span>
            <span class="tik-tok-text">抖音</span>
            <span>{{ item.title }}</span>
          </span>
        </div>
        <div class="item-center">
          <div class="make-money" v-if="item.share_reward">
            <span class="p-4 fs-10 line">赚</span>
            <span class="p-4 fs-10">{{ item.share_reward }}</span>
          </div>
          <div class="buy">{{ item.sales }}</div>
        </div>
        <div class="item-bottom">
          <div class="c-FF6238" style="font-size: 0.75rem;">
            到手价
            <span class="ml-4" style="font-size: 0.875rem;">{{ $i18n.t('money') }}{{ item.coupon_price }}</span>
          </div>
          <div class="fs-12 c-999 line-through ml-12">{{ $i18n.t('money') }}{{ item.price }}</div>
        </div>
      </div>
    </div>
    <div class="loadMore" v-if="isLoadMore && tiktokList.length > 0" @click="getMoreData">加载更多</div>
    <div class="loadMore" v-if="lastIndex == index && (page >= total_page)">{{ $i18n.t("没有更多了") }}~~</div>
  </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const css = function() {
  if (this.datas.preview_color) {
    // 确保数据已传入
    let datas = this.plugin_active && this.openTemplate == 1 ? this.datas_style02 : this.datas;
    const { preview_color} = datas;

    return `
        .component-${this.id} .list-page {
            background: ${preview_color};
        }
    `;
  }
};
import { Image as VanImage } from 'vant';
export default {
  name:'',
  props: ["id","page_id", "datas","lastIndex","index","component_key","isBottom","tabcontrol", "isLast"],
  //import引入的组件需要注入到对象中才能使用
  components: {
    VanImage
  },
  data() {
    return {
      page:1,
      arrIndex: 1, //组件加载下一页
      storeScroll:'',
      isLoadMore: true,
      allLoaded: false, //全部数据加载完成
      total_page:0
    };
  },
  //监听属性 类似于data概念
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    tiktokList() {
      return this.datas.list.data || this.datas.list;
    }
  },
  //监控data中的数据变化
  watch: {
    isBottom: function(newVal, oldVal) {
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.getMoreData();
        }
      }
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.isLoadMore) {
        this.getMoreData();
      }
    }
  },
  //方法集合
  methods: {
    link_goods({ product_id }) {
      this.$router.push(this.fun.getUrl("TikTokDetail", { id: product_id }, {}));
    },
    setListData() { //处理列表数据是自动获取还是手动获取
      if(this.datas.get_number > 0 && this.datas.list?.data?.length > 0 && this.datas.list?.data?.length > this.datas.get_number) {
        this.datas.list.data.splice(this.datas.get_number,this.datas.list.data.length-this.datas.get_number);
        this.isLoadMore = false;
      }
      if(this.datas?.list?.data) {
        this.total_page = this.datas.list.last_page;
        if(this.total_page <= this.page) {
          this.isLoadMore = false;
        }
      }else {
        if(this.datas.list.length <= 0) {
          this.isLoadMore = false;
        }
      }
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page:this.page,
          decorate_id: this.page_id || this.$store.state.temp.item.id,
          component_id: this.id,
          component_key: 'U_tiktokCps',
        }
        $http
        .post(
          "home-page.get-decorate-page",
          json,'loading')
        .then((response)=> {
          this.isLoadMore = true;
          if (response.result === 1) {
            let res = response.data;
            let list = res?.data;
            this.datas.list.data =this.datas.list.data.concat(list);//数组拼接
            if(this.datas.get_number > 0) { //装修自动获取
              if(this.datas.list.data.length > this.datas.get_number) {
                this.datas.list.data.splice(this.datas.get_number,  this.datas.list.data.length-this.datas.get_number);
                this.isLoadMore = false;
              }
            }
            if(this.page >= this.total_page) {
              this.isLoadMore = false;
            }
            this.goodsFlag = true;
          } else {
            this.page = this.page - 1;
            // this.isLoadMore = false;
          }
        },
        function(response) {
          console.error(response);
          // error callback
        });
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.setListData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .loadMore {
    width: 100%;
    height: 3.125rem;
    cursor: pointer;
    line-height: 3.125rem;
    text-align: center;
    clear: both;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 5px;
    .list-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      width: 46%;
      overflow: hidden;
      background: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin: 0.75rem 0.375rem 0;
      .tik-tok-text {
        color: rgb(255, 255, 255);
        background: rgb(0, 0, 0);
        padding: 0 5px;
        border-radius: 0.3125rem;
        margin-right: 0.3125rem;
        font-size: 0.75rem;
      }
      .title {
        display: flex;
        text-align: left;
        padding: 0.1875rem 0.5rem 0.375rem;
      }
      .item-center {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 0.5rem;
      }
      .buy {
        color: #999;
        font-size: 0.75rem;
      }
      .item-bottom {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.25rem 0.5rem 0.9rem;
      }

      .active {
        color: #ef5452;
      }
      .c-FF6238 {
        color: #ff6238;
      }

      .content {
        background: #fff;
      }
      .ml-4 {
        margin-left: 0.25rem;
      }
      .line-through {
        text-decoration: line-through;
      }
      .c-999 {
        color: #999;
      }
      .ml-12 {
        margin-left: 0.75rem;
      }
      .fs-12 {
        font-size: 0.75rem;
      }
    }
  }
</style>